<template>
  <div class="login-page">
    <div class="login-content">
      <!-- 顶部背景图和插画 -->
      <div class="login-header">
        <div class="bg-image"></div>
        <div class="back-btn" @click="$router.back()">
          <van-icon name="arrow-left"/>
        </div>
        <div class="illustration">
          <img alt="login" src="@/assets/img/login.png"/>
        </div>
      </div>

      <!-- 登录表单 -->
      <div class="login-form">
        <div class="form-content">
          <!-- 输入框 -->
          <div class="form-item">
            <van-field
                v-model="phone"
                :rules="[{ required: true, message: '请输入手机号' }]"
                class="custom-field"
                placeholder="请输入手机号"
                type="tel"
            >
              <template #left-icon>
                <div class="custom-icon">
                  <van-icon name="phone-o" size="20"/>
                </div>
              </template>
            </van-field>
          </div>

          <div class="form-item">
            <van-field
                v-model="password"
                :rules="[{ required: true, message: '请输入密码' }]"
                class="custom-field"
                placeholder="请输入密码"
                type="password"
            >
              <template #left-icon>
                <div class="custom-icon">
                  <van-icon name="lock" size="20"/>
                </div>
              </template>
            </van-field>
          </div>

          <!-- 操作按钮 -->
          <div class="actions">
            <router-link class="register" to="/register">立即注册</router-link>
          </div>

          <!-- 登录按钮 -->
          <div class="submit">
            <van-button
                :loading="loading"
                block
                class="login-btn"
                round
                @click="handleLogin"
            >
              登录
            </van-button>
          </div>

          <!-- 第三方登录 -->
          <div class="other-login">
            <div class="title">
              <span class="line"></span>
              <span class="text">其他登录方式</span>
              <span class="line"></span>
            </div>
            <div class="icons">
              <van-icon color="#07c160" name="wechat" size="28"/>
              <van-icon color="#1989fa" name="qq" size="28"/>
              <van-icon color="#ee0a24" name="weibo" size="28"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {message} from "@/utils/message";
import {useUserStore} from "@/store/user";
import {setToken} from "@/utils/auth";
import userAPI from "@/api/user";

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const phone = ref("");
const password = ref("");
const loading = ref(false);

const handleLogin = async () => {
  // 表单验证
  if (!phone.value) {
    message.warning("请输入手机号");
    return;
  }
  if (!password.value) {
    message.warning("请输入密码");
    return;
  }

  try {
    loading.value = true;
    const res = await userAPI.loginWithPhone(phone.value, password.value);
    setToken(res.token);
    message.success("登录成功");
    router.push("/");
  } catch (error) {
    console.error("登录失败:", error);
    message.error(error.message || "登录失败");
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
.login-page {
  min-height: 100vh;
  background: #fff;

  .login-content {
    position: relative;
    height: 100vh;
    overflow: hidden;

    .login-header {
      position: relative;
      height: 40vh;
      overflow: hidden;

      .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #4b9eff 0%, #2c78f5 100%);
        border-radius: 0 0 30px 30px;
      }

      .back-btn {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 1;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;

        .van-icon {
          color: #fff;
          font-size: 20px;
        }
      }

      .illustration {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 240px;
        padding: 20px 0;

        img {
          width: 100%;
          height: auto;
        }
      }
    }

    .login-form {
      position: absolute;
      top: 37vh;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-radius: 30px 30px 0 0;
      padding: 40px 25px;

      .form-content {
        .form-item {
          margin-bottom: 16px;

          :deep(.custom-field) {
            background: #f5f7fa;
            border-radius: 25px;
            padding: 5px 15px;

            &.van-field--error,
            &.van-field--active,
            &:active,
            &:focus,
            &:focus-within {
              background: #f5f7fa !important;
            }

            input {
              background-color: transparent !important;
            }

            .van-field__left-icon {
              margin-right: 10px;
              display: flex;
              align-items: center;
              height: 36px;
            }

            .custom-icon {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 24px;
              height: 24px;
              color: #2c78f5;
            }

            .van-field__control {
              height: 36px;
              font-size: 14px;
            }
          }
        }

        .actions {
          display: flex;
          justify-content: space-between;
          margin: 16px 0;
          padding: 0 5px;
          font-size: 14px;

          a {
            color: #666;
            text-decoration: none;

            &.register {
              color: #2c78f5;
            }
          }
        }

        .submit {
          margin: 24px 0;

          .login-btn {
            height: 44px;
            font-size: 16px;
            font-weight: 500;
            background: linear-gradient(135deg, #4b9eff 0%, #2c78f5 100%);
            border: none;
          }
        }

        .other-login {
          margin-top: 40px;

          .title {
            display: flex;
            align-items: center;
            color: #999;
            font-size: 14px;
            margin-bottom: 20px;

            .line {
              flex: 1;
              height: 1px;
              background: #eee;
            }

            .text {
              padding: 0 16px;
            }
          }

          .icons {
            display: flex;
            justify-content: center;
            gap: 40px;

            .van-icon {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
